<!-- checkbox/page.svelte -->
<script lang="ts">
	import Checkbox from '$lib/components/Form/Checkbox/Checkbox.svelte';
	import CheckboxGroup from '$lib/components/Form/Checkbox/CheckboxGroup.svelte';
	import CheckboxSelectAll from '$lib/components/Form/Checkbox/CheckboxSelectAll.svelte';
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';

	// 基础用法示例代码（新增边框样式）
	const baseCode = `<script lang="ts">
	import Checkbox from '$lib/components/Form/Checkbox/Checkbox.svelte';
	import CheckboxGroup from '$lib/components/Form/Checkbox/CheckboxGroup.svelte';

	let singleValue = ['success']; // 单独使用绑定值
	let groupValue = ['vue']; // 组内使用绑定值

	// 组内选中状态变化回调
	function handleGroupChange(values: any[]) {
		console.log('组内选中值变化：', values);
	}
<\/script>

<!-- 单独使用（基础用法） -->
<div class="example-group">
	<Checkbox value="apple" label="苹果" modelValue={true} size="sm" />
	<Checkbox value="banana" label="香蕉" modelValue={false} />
	<Checkbox value="orange" label="橙子" modelValue={false} size="lg" />
</div>

<!-- 单独使用（主题色示例） -->
<div class="example-group" style="margin-top: 16px;">
	<Checkbox value="info" label="info 主题" variant="info" bind:modelValue={singleValue} />
	<Checkbox value="primary" label="primary 主题" variant="primary" bind:modelValue={singleValue} />
	<Checkbox value="success" label="success 主题" variant="success" bind:modelValue={singleValue} />
	<Checkbox value="warning" label="warning 主题" variant="warning" bind:modelValue={singleValue} />
	<Checkbox value="error" label="error 主题" variant="error" bind:modelValue={singleValue} />
	<Checkbox value="secondary" label="secondary 主题" variant="secondary" bind:modelValue={singleValue} />
</div>

<!-- 组合使用 -->
<CheckboxGroup bind:modelValue={groupValue} onchange={handleGroupChange} style="margin-top: 16px;">
	<Checkbox value="react" label="React" />
	<Checkbox value="vue" label="Vue" />
	<Checkbox value="svelte" label="Svelte" />
	<Checkbox value="angular" label="Angular" disabled />
</CheckboxGroup>`.trim();

	// 全选功能示例代码
	const selectAllCode = `<script lang="ts">
	import Checkbox from '$lib/components/Form/Checkbox/Checkbox.svelte';
	import CheckboxGroup from '$lib/components/Form/Checkbox/CheckboxGroup.svelte';
	import CheckboxSelectAll from '$lib/components/Form/Checkbox/CheckboxSelectAll.svelte';

	// 选项数据
	let options = [
		{ value: 'option1', label: '选项 1' },
		{ value: 'option2', label: '选项 2' },
		{ value: 'option3', label: '选项 3' },
		{ value: 'option4', label: '选项 4' }
	];
	let checkedOptions = ['option1']; // 默认选中第一个选项

	// 回调函数（统一值数组格式）
	function handleSelectGroupChange(values: any[]) {
		console.log('组内选中值变化：', values);
	}

	function handleCheckAllChange(values: any[]) {
		console.log('全选/取消全选：', values);
	}

	// 提取所有选项value（供CheckboxSelectAll使用）
	const optionValues = options.map(item => item.value);
<\/script>

<!-- 勾选多选框组（全选/反选功能） -->
<div>
	<div style="margin-bottom: 8px;">
		<CheckboxSelectAll 
			label="全选"
			{options}
			bind:modelValue={checkedOptions}
			onchange={handleCheckAllChange}
		/>
	</div>
	<CheckboxGroup
		bind:modelValue={checkedOptions}
		size="md"
		onchange={handleSelectGroupChange}
	>
		{#each options as item}
			<Checkbox value={item.value} label={item.label} />
		{/each}
	</CheckboxGroup>
</div>`.trim();

	// 按钮样式示例代码
	const buttonStyleCode = `<script lang="ts">
	import Checkbox from '$lib/components/Form/Checkbox/Checkbox.svelte';
	import CheckboxGroup from '$lib/components/Form/Checkbox/CheckboxGroup.svelte';

	// 绑定值（每个组单独绑定，避免冲突）
	let sizeValuesSm = ['Beijing']; // 小尺寸
	let sizeValuesMd = ['Beijing']; // 中尺寸
	let sizeValuesLg = ['Beijing']; // 大尺寸
	let sizeValuesDisabled = ['Beijing']; // 禁用

	// 选项数据
	const cities = [
		{ value: 'Beijing', label: '北京' },
		{ value: 'Shanghai', label: '上海' },
		{ value: 'Guangzhou', label: '广州' },
		{ value: 'Shenzhen', label: '深圳' }
	];

	function handleSizeGroupChange(values: any[]) {
		console.log('尺寸组选中变化：', values);
	}
<\/script>

<!-- 不同尺寸的按钮样式 -->
<div class="example">
	<div class="example-group">
		<CheckboxGroup
			bind:modelValue={sizeValuesLg}
			variant="primary"
			buttonStyle
			size="lg"
			onchange={handleSizeGroupChange}
		>
			{#each cities as city}
				<Checkbox value={city.value} label={city.label} />
			{/each}
		</CheckboxGroup>
	</div>
	<div class="example-group">
		<CheckboxGroup
			bind:modelValue={sizeValuesMd}
			variant="primary"
			buttonStyle
			size="md"
			onchange={handleSizeGroupChange}
		>
			{#each cities as city}
				<Checkbox value={city.value} label={city.label} />
			{/each}
		</CheckboxGroup>
	</div>
	<div class="example-group">
		<CheckboxGroup
			bind:modelValue={sizeValuesSm}
			variant="primary"
			buttonStyle
			size="sm"
			onchange={handleSizeGroupChange}
		>
			{#each cities as city}
				<Checkbox value={city.value} label={city.label} />
			{/each}
		</CheckboxGroup>
	</div>
	<div class="example-group">
		<CheckboxGroup
			bind:modelValue={sizeValuesDisabled}
			variant="primary"
			buttonStyle
			size="sm"
			onchange={handleSizeGroupChange}
			disabled
		>
			{#each cities as city}
				<Checkbox value={city.value} label={city.label} />
			{/each}
		</CheckboxGroup>
	</div>
</div>`.trim();

	// 边框样式专属示例代码
	const borderStyleCode = `<script lang="ts">
	import Checkbox from '$lib/components/Form/Checkbox/Checkbox.svelte';
	import CheckboxGroup from '$lib/components/Form/Checkbox/CheckboxGroup.svelte';

	// 绑定let singleBorderValue1 = ['A'];
	let singleBorderValue2 = [];
	let singleBorderValue3 = [];
	let singleBorderValue4 = ['A'];
	let groupBorderValue = ['Item1'];

	// 选项数据
	const groupItems = [
		{ value: 'A', label: '大尺寸A' },
		{ value: 'B', label: '大尺寸B' },
	];
<\/script>
<!-- 不同尺寸的边框样式 -->
<div class="example">
	<div class="example-group">
		<CheckboxGroup bind:modelValue={groupBorderValue} size="lg">
			{#each groupItems as item}
				<Checkbox value={item.value} label={item.label} border/>
			{/each}
		</CheckboxGroup>
	</div>

	<div class="example-group">
		<Checkbox value="A" label="中尺寸A" bind:modelValue={singleBorderValue3} border />
		<Checkbox value="B" label="中尺寸B" bind:modelValue={singleBorderValue4} border />
	</div>

	<div class="example-group">
		<Checkbox value="A" label="小尺寸A" bind:modelValue={singleBorderValue1} border size="sm" />
		<Checkbox value="B" label="小尺寸B" bind:modelValue={singleBorderValue2} border size="sm" />
	</div>

	<div class="example-group">
		<Checkbox value="X" label="小尺寸X" modelValue={['X']} border disabled size="sm" />
		<Checkbox value="Y" label="小尺寸Y" modelValue={[]} border disabled size="sm" />
	</div>
</div>`.trim();

	// 示例测试数据
	let options = [
		{ value: 'option1', label: '选项 1' },
		{ value: 'option2', label: '选项 2' },
		{ value: 'option3', label: '选项 3' },
		{ value: 'option4', label: '选项 4' }
	];
	let checkedOptions = ['option1'];
	let optionValues = options.map((item) => item.value);

	// 按钮样式测试数据
	let sizeValuesSm = ['Beijing'];
	let sizeValuesMd = ['Beijing'];
	let sizeValuesLg = ['Beijing'];
	let sizeValuesDisabled = ['Beijing'];
	const cities = [
		{ value: 'Beijing', label: '北京' },
		{ value: 'Shanghai', label: '上海' },
		{ value: 'Guangzhou', label: '广州' },
		{ value: 'Shenzhen', label: '深圳' }
	];

	// 边框样式测试数据
	let singleBorderValue1 = true;
	let singleBorderValue2 = false;
	let singleBorderValue3 = false;
	let singleBorderValue4 = true;
	let groupBorderValue: any[] = ['Item1'];
	const groupItems = [
		{ value: 'A', label: '大尺寸A' },
		{ value: 'B', label: '大尺寸B' }
	];

	// 页面交互回调函数
	function handleGroupChange(values: any[]) {
		console.log('组内选中值变化：', values);
	}

	function handleCheckAllChange(values: any[]) {
		console.log('全选/取消全选：', values);
	}

	function handleSizeGroupChange(values: any[]) {
		console.log('尺寸组选中变化：', values);
	}

	// 属性文档数据（新增border属性）
	const attributesData = [
		{
			id: 1,
			name: 'value',
			describe: '多选框的唯一标识值，用于判断选中状态',
			type: 'any[] | boolean',
			defaulValue: 'false'
		},
		{ id: 2, name: 'label', describe: '显示的文本标签', type: 'string | number', defaulValue: '' },
		{
			id: 3,
			name: 'disabled',
			describe: '是否禁用多选框（禁用后不可点击）',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 4,
			name: 'indeterminate',
			describe: '是否显示半选状态（用于全选场景）',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 5,
			name: 'name',
			describe: '表单名称，用于表单提交时的分组标识',
			type: 'string',
			defaulValue: '随机生成的checkbox-xxx格式字符串'
		},
		{
			id: 6,
			name: 'size',
			describe: '多选框尺寸',
			type: ['sm', 'md', 'lg'],
			defaulValue: 'md'
		},
		{
			id: 7,
			name: 'variant',
			describe: '主题色枚举，快速设置预设颜色',
			type: ['info', 'primary', 'secondary', 'success', 'warning', 'error'],
			defaulValue: 'primary'
		},
		{
			id: 8,
			name: 'className',
			describe: '额外的CSS类名，用于自定义样式',
			type: 'string',
			defaulValue: ''
		},
		{
			id: 9,
			name: 'modelValue',
			describe: '双向绑定值（单独使用时），存储选中的值数组',
			type: 'any[]',
			defaulValue: '[]'
		},
		{
			id: 10,
			name: 'buttonStyle',
			describe: '是否启用按钮样式（启用后隐藏勾选框，以按钮形式展示）',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 11,
			name: 'border',
			describe: '是否显示边框（启用后会添加边框样式，与按钮样式互斥）',
			type: 'boolean',
			defaulValue: 'false'
		}
	];

	const groupAttributesData = [
		{
			id: 1,
			name: 'modelValue',
			describe: '双向绑定值（组内使用时），存储选中的值数组',
			type: 'any[]',
			defaulValue: '[]'
		},
		{
			id: 2,
			name: 'disabled',
			describe: '是否禁用整个组（组内所有选项均不可点击）',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 3,
			name: 'name',
			describe: '表单名称，用于表单提交时的分组标识（组内所有选项共享）',
			type: 'string',
			defaulValue: ''
		},
		{
			id: 4,
			name: 'size',
			describe: '组内所有多选框的统一尺寸',
			type: ['sm', 'md', 'lg'],
			defaulValue: 'md'
		},
		{
			id: 5,
			name: 'variant',
			describe: '组内所有多选框的统一主题色',
			type: ['info', 'primary', 'secondary', 'success', 'warning', 'error'],
			defaulValue: 'primary'
		},
		{
			id: 6,
			name: 'className',
			describe: '额外的CSS类名，用于自定义组容器样式',
			type: 'string',
			defaulValue: ''
		},
		{
			id: 7,
			name: 'buttonStyle',
			describe:
				'是否为组内所有多选框启用按钮样式（优先级高于单个多选框的buttonStyle属性，与border互斥）',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 8,
			name: 'border',
			describe:
				'是否为组内所有多选框启用边框样式（优先级高于单个多选框的border属性，与buttonStyle互斥）',
			type: 'boolean',
			defaulValue: 'false'
		},
		{
			id: 9,
			name: 'fill',
			describe: '自定义选中状态填充色（优先级高于variant）',
			type: 'string',
			defaulValue: ''
		},
		{
			id: 10,
			name: 'textColor',
			describe: '自定义文本颜色（优先级高于variant）',
			type: 'string',
			defaulValue: ''
		}
	];

	const groupEventsData = [
		{
			id: 1,
			name: 'onchange',
			describe: '组内选中状态变化时触发的回调（包含单个选中、部分选中、全部选中、全部取消）',
			type: '(values: any[]) => void'
		}
	];
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Checkbox 多选框</div>
		<div class="describe">
			用于多项选择的交互组件，支持单独使用、组合使用、全选功能、按钮样式和边框样式，提供主题色枚举、尺寸配置和无障碍支持。选中状态的字体色、边框色会自动关联当前主题色。
		</div>
	</div>

	<!-- 基础用法模块（包含边框样式） -->
	<div class="subtitle">
		<div class="name">基础用法</div>
		<div class="describe">
			支持<span class="keyword">&nbsp;单独使用&nbsp;</span>和<span class="keyword"
				>&nbsp;组合使用&nbsp;</span
			>，可通过&nbsp;&nbsp;<span class="tag">size</span>&nbsp;&nbsp;设置尺寸，<span class="tag"
				>variant</span
			>&nbsp;&nbsp;设置主题色，<span class="tag">border</span
			>&nbsp;&nbsp;显示边框，满足不同场景需求。
		</div>
	</div>

	<ComponentPreview code={baseCode}>
		<div class="example">
			<div class="category">
				<span class="keyword">单独使用（基础）</span>
			</div>
			<div class="example-group">
				<Checkbox value="apple" label="苹果" modelValue={true} size="sm" />
				<Checkbox value="banana" label="香蕉" modelValue={false} />
				<Checkbox value="orange" label="橙子" modelValue={false} size="lg" />
			</div>

			<div class="category">
				<span class="keyword">单独使用（主题色）</span>
			</div>
			<div class="example-group">
				<Checkbox value="info" label="info 主题" variant="info" modelValue={false} />
				<Checkbox value="primary" label="primary 主题" variant="primary" modelValue={false} />
				<Checkbox value="success" label="success 主题" variant="success" modelValue={true} />
				<Checkbox value="warning" label="warning 主题" variant="warning" modelValue={['warning']} />
				<Checkbox value="error" label="error 主题" variant="error" modelValue={false} />
				<Checkbox
					value="secondary"
					label="secondary 主题"
					variant="secondary"
					modelValue={['success']}
				/>
			</div>

			<div class="category">
				<span class="keyword">组合使用（CheckboxGroup）</span>
			</div>
			<div class="example-group">
				<CheckboxGroup
					modelValue={['vue']}
					size="md"
					variant="primary"
					onchange={handleGroupChange}
				>
					<Checkbox value="react" label="React" />
					<Checkbox value="vue" label="Vue" />
					<Checkbox value="svelte" label="Svelte" />
					<Checkbox value="angular" label="Angular" disabled />
				</CheckboxGroup>
			</div>
		</div>
	</ComponentPreview>

	<!-- 边框样式专属模块 -->
	<div class="subtitle">
		<div class="name">边框样式</div>
		<div class="describe">
			通过设置&nbsp;&nbsp;<span class="tag">border={true}</span
			>&nbsp;&nbsp;属性为多选框添加边框，支持与尺寸、主题色搭配使用，适合需要突出显示选项的场景。边框样式与按钮样式互斥，同时设置时优先显示按钮样式。
		</div>
	</div>

	<ComponentPreview code={borderStyleCode}>
		<div class="example">
			<div class="example-group">
				<CheckboxGroup bind:modelValue={groupBorderValue} size="lg">
					{#each groupItems as item}
						<Checkbox value={item.value} label={item.label} border />
					{/each}
				</CheckboxGroup>
			</div>
			<div class="example-group">
				<Checkbox value="A" label="中尺寸A" bind:modelValue={singleBorderValue3} border />
				<Checkbox value="B" label="中尺寸B" bind:modelValue={singleBorderValue4} border />
			</div>
			<div class="example-group">
				<Checkbox value="A" label="小尺寸A" bind:modelValue={singleBorderValue1} border size="sm" />
				<Checkbox value="B" label="小尺寸B" bind:modelValue={singleBorderValue2} border size="sm" />
			</div>
			<div class="example-group">
				<Checkbox value="X" label="小尺寸X" modelValue={['X']} border disabled size="sm" />
				<Checkbox value="Y" label="小尺寸Y" modelValue={[]} border disabled size="sm" />
			</div>
		</div>
	</ComponentPreview>

	<!-- 按钮样式模块 -->
	<div class="subtitle">
		<div class="name">按钮样式</div>
		<div class="describe">
			通过设置&nbsp;&nbsp;<span class="tag">buttonStyle={true}</span
			>&nbsp;&nbsp;属性启用按钮样式，隐藏勾选框，选项以按钮形式排列展示，支持主题色和尺寸配置。
		</div>
	</div>

	<ComponentPreview code={buttonStyleCode}>
		<div class="example">
			<div class="example-group">
				<CheckboxGroup
					bind:modelValue={sizeValuesLg}
					variant="primary"
					buttonStyle
					size="lg"
					onchange={handleSizeGroupChange}
				>
					{#each cities as city}
						<Checkbox value={city.value} label={city.label} />
					{/each}
				</CheckboxGroup>
			</div>
			<div class="example-group">
				<CheckboxGroup
					bind:modelValue={sizeValuesMd}
					variant="primary"
					buttonStyle
					size="md"
					onchange={handleSizeGroupChange}
				>
					{#each cities as city}
						<Checkbox value={city.value} label={city.label} />
					{/each}
				</CheckboxGroup>
			</div>
			<div class="example-group">
				<CheckboxGroup
					bind:modelValue={sizeValuesSm}
					variant="primary"
					buttonStyle
					size="sm"
					onchange={handleSizeGroupChange}
				>
					{#each cities as city}
						<Checkbox value={city.value} label={city.label} />
					{/each}
				</CheckboxGroup>
			</div>
			<div class="example-group">
				<CheckboxGroup
					bind:modelValue={sizeValuesDisabled}
					buttonStyle
					size="sm"
					onchange={handleSizeGroupChange}
					disabled
				>
					{#each cities as city}
						<Checkbox value={city.value} label={city.label} />
					{/each}
				</CheckboxGroup>
			</div>
		</div>
	</ComponentPreview>

	<!-- 全选/反选功能模块 -->
	<div class="subtitle">
		<div class="name">全选/反选功能</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;CheckboxSelectAll&nbsp;</span
			>组件实现全选/反选功能，自动关联子选项状态，支持半选状态显示。使用循环渲染可简化多个选项的开发。
		</div>
	</div>

	<ComponentPreview code={selectAllCode}>
		<div class="example">
			<div class="example-group">
				<div>
					<div style="margin-bottom: 8px;">
						<CheckboxSelectAll
							label="全选"
							{options}
							bind:modelValue={checkedOptions}
							onchange={handleCheckAllChange}
						/>
					</div>
					<CheckboxGroup bind:modelValue={checkedOptions} size="md" onchange={handleGroupChange}>
						{#each options as item}
							<Checkbox value={item.value} label={item.label} />
						{/each}
					</CheckboxGroup>
				</div>
			</div>
		</div>
	</ComponentPreview>

	<!-- Checkbox 属性文档 -->
	<div class="subtitle">
		<div class="name">Checkbox Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<!-- CheckboxGroup 属性文档 -->
	<div class="subtitle">
		<div class="name">CheckboxGroup Attributes</div>
	</div>
	<Table data={groupAttributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<!-- CheckboxGroup 回调文档 -->
	<div class="subtitle">
		<div class="name">CheckboxGroup Callbacks</div>
	</div>
	<Table data={groupEventsData} border={false} size="lg">
		<TableColumn key="name" title="回调名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>
</div>
